<template>
  <div class="admin-web-feedback">
    <w-table-view :list-data="listData">
      <template v-slot="scope">
        <w-cell
          :title="scope.item.name"
          :hover="false"
          :describe="scope.item.date | DateFormat"
          :detail="scope.item.content"
          :icon="scope.item.icon"
          :operation-width="100"
        >
          <template slot="option">
            <ISwitch
              v-model="scope.item.isShow"
              @on-change="isShowChange(scope.item)"
            />
            &nbsp;&nbsp;
            <a-button
              type="danger"
              size="small"
              @click="removeBtnClick(scope.item)"
            >
              删除
            </a-button>
          </template>
        </w-cell>
      </template>
    </w-table-view>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Watch } from 'vue-property-decorator'
import { Admin } from '@/config/api'
import WTableView from '@/components/global/tableview/customCell'
import WCell from '@/components/global/cell/cell_00'
import Feedback from '@/models/feedback'

@Component({
  name: 'AdminWeFeedback',
  layout: 'admin',
  components: {
    WTableView,
    WCell
  },
  async asyncData ({ app, route }) {
    const { $wAxios } = app
    const data = await $wAxios.$get(Admin.feedback.list, route.query)
    return { listData: data }
  },
  head () {
    return {
      title: '意见反馈'
    }
  }
})
export default class AdminWeFeedback extends Vue {
  listData: Array<Feedback> = []

  @Watch('$route.query')
  routerChange () {
    this.reload()
  }

  async reload () {
    this.listData = await this.$wAxios.$get(
      Admin.feedback.list,
      this.$route.query
    )
  }

  isShowChange (item: Feedback) {
    this.$wAxios
      .$put(`${Admin.feedback.update}${item._id}`, item)
      .then(() => {
        this.$message.success('修改成功')
        this.reload()
      })
      .catch(() => {})
  }

  removeBtnClick (item: Feedback) {
    this.$wRemovePop(() => {
      return this.$wAxios.$delete(`${Admin.feedback.delete}${item._id}`)
    }, item.title).then(() => {
      this.reload()
    })
  }
}
</script>

<style scoped lang="less">
.admin-web-feedback {
  .title {
    font-size: 16px;
    color: #333;
    .time {
      color: #999;
    }
  }
  .content {
    font-size: 14px;
    margin-top: 4px;
    line-height: 20px;
  }
}
</style>
